<template>
  <Header/>
  <div class="deepseek-container">
<!--    <h1>DeepSeek</h1>-->

    <div class="chat-container">
      <!-- 对话历史 -->
      <div class="message-history">
          <!-- 修改消息渲染部分 -->
          <div
              v-for="(message, index) in messages"
              :key="index"
              :class="['message', message.role]"
          >
            <div class="message-inner">
              <div class="role-badge">{{ message.role === 'user' ? '你' : 'AI' }}</div>
              <!-- 用户消息直接显示 -->
              <div v-if="message.role === 'user'" class="content user-content">{{ message.content }}</div>
              <!-- AI 消息使用 Markdown 渲染 -->
              <v-md-preview-html
                  v-else
                  :html="message.renderedHtml || message.content"
                  preview-class="ai-content vuepress-markdown-body"
              ></v-md-preview-html>
            </div>
          </div>

          <div v-if="isLoading" class="message assistant">
            <div class="message-inner">
              <div class="role-badge">AI</div>
              <div class="content loading">
                <span class="typing-indicator">
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
        <textarea
            v-model="userInput"
            placeholder="输入你的问题..."
            @keydown.enter.exact.prevent="sendMessage"
            :disabled="isLoading"
        ></textarea>
          <button
              @click="sendMessage"
              :disabled="isLoading || !userInput.trim()"
              class="send-button"
          >
            <span v-if="!isLoading">发送</span>
            <span v-else class="loading-dots">...</span>
            <svg v-if="!isLoading" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="send-icon">
              <line x1="22" y1="2" x2="11" y2="13"></line>
              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
          </button>
        </div>
      </div>

      <!-- 状态信息 -->
      <div v-if="errorMessage" class="error-message">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="error-icon">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        {{ errorMessage }}
      </div>

    </div>
</template>

<style scoped>
.deepseek-container {
  max-width: 800px;
  margin: 100px auto;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #f8faf8, #f0f5f0);
}

h1 {
  color: #3a5a40;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(58, 90, 64, 0.1);
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: white;
  box-shadow:
    0 4px 30px rgba(58, 90, 64, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.03);
}

.message-history {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: white;
  scroll-behavior: smooth;
}

.message {
  margin-bottom: 16px;
}

.message-inner {
  display: flex;
  gap: 12px;
  max-width: 86%;
  margin: 0 auto;
}

.role-badge {
  font-weight: 500;
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  height: fit-content;
  flex-shrink: 0;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message.user .role-badge {
  background: #588157;
}

.message.assistant .role-badge {
  background: #3a5a40;
}

.content {
  padding: 14px 18px;
  border-radius: 16px;
  line-height: 1.6;
  font-size: 15px;
  flex-grow: 1;
  box-shadow: 0 1px 3px rgba(58, 90, 64, 0.1);
}

.user-content {
  background: rgba(232, 245, 233, 0.7);
  color: #344e41;
  border-left: 3px solid #588157;
}

.ai-content {
  background: rgba(241, 248, 241, 0.8);
  color: #3a5a40;
  border-left: 3px solid #3a5a40;
}

.loading {
  color: #588157;
  padding: 14px 18px;
  background: transparent;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  height: 20px;
}

.typing-indicator .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #588157;
  margin-right: 4px;
  animation: bounce 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
  margin-right: 0;
}

@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

.input-area {
  display: flex;
  padding: 16px 20px;
  background: rgba(248, 250, 248, 0.9);
  border-top: 1px solid rgba(163, 177, 138, 0.2);
}

textarea {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  resize: none;
  outline: none;
  font-size: 15px;
  min-height: 30px; /* 修改这里的值 */
  max-height: 30px; /* 修改这里的值 */
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 2px rgba(58, 90, 64, 0.1),
    0 1px 1px rgba(255, 255, 255, 0.8);
}


textarea:focus {
  box-shadow:
    inset 0 0 0 2px rgba(88, 129, 87, 0.3),
    0 1px 1px rgba(255, 255, 255, 0.8);
}

.send-button {
  margin-left: 12px;
  padding: 0 20px;
  background: #3a5a40;
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  box-shadow: 0 2px 4px rgba(58, 90, 64, 0.2);
}

.send-button:hover:not(:disabled) {
  background: #344e41;
  transform: translateY(-1px);
}

.send-button:active:not(:disabled) {
  transform: translateY(0);
}

.send-button:disabled {
  background: #dad7cd;
  cursor: not-allowed;
}

.error-message {
  color: #dc2626;
  padding: 12px 16px;
  margin-top: 16px;
  background-color: #fef2f2;
  border-radius: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.error-icon {
  flex-shrink: 0;
}

/* 滚动条样式 */
.message-history::-webkit-scrollbar {
  width: 6px;
}

.message-history::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.message-history::-webkit-scrollbar-thumb {
  background: #a0d8b6;
  border-radius: 3px;
}

.message-history::-webkit-scrollbar-thumb:hover {
  background: #588157;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .deepseek-container {
    margin: 20px auto;
    height: 88vh;
    padding: 0 12px;
  }

  .message-inner {
    max-width: 94%;
  }



  .send-button {
    height: 48px;
    padding: 0 16px;
  }
}
</style>


<script setup lang="ts">
import {ref} from 'vue'
import OpenAI from 'openai'
import Header from "@/components/Header.vue";
import VueMarkdownEditor, {xss} from '@kangc/v-md-editor';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
// 复制功能
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";


VueMarkdownEditor.use(createLineNumbertPlugin());
VueMarkdownEditor.use(createCopyCodePlugin());

interface Message {
  role: 'user' | 'assistant';
  content: string;
  renderedHtml?: string;
}


// 初始化OpenAI客户端
const openai = new OpenAI({
  apiKey: 'sk-c00c6676be584ace93cbb132de167f44',
  baseURL: 'https://api.deepseek.com/v1',
  dangerouslyAllowBrowser: true // 允许在浏览器环境中使用
})

const userInput = ref('')
const isLoading = ref(false)
const errorMessage = ref('')
const messages = ref<Message[]>([])
const html = ref(''); // 将 html 定义为响应式变量
const handleCopyCodeSuccess = (code: any) => {
  ElMessage.success('已成功复制到剪切板')
  console.log(code);
}

const sendMessage = async () => {
  if (!userInput.value.trim() || isLoading.value) return

  const userMessage = userInput.value
  messages.value.push({role: 'user', content: userMessage})
  userInput.value = ''
  isLoading.value = true
  errorMessage.value = ''

  try {
    // 使用OpenAI SDK调用DeepSeek API
    const completion = await openai.chat.completions.create({
      model: "deepseek-chat",
      messages: messages.value.map(msg => ({
        role: msg.role,
        content: msg.content
      })),
      temperature: 0.7,
      max_tokens: 2000
    })

    const aiMessage = completion.choices[0]?.message?.content;
    if (aiMessage) {
      const renderedHtml = VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(aiMessage);
      messages.value.push({
        role: 'assistant',
        content: aiMessage,
        renderedHtml: xss.process(renderedHtml)
      })
    } else {
      throw new Error('未收到有效回复')
    }

  } catch (error) {
    console.error('API调用错误:', error)
    errorMessage.value = error instanceof Error ? error.message : '请求发生错误'
  } finally {
    isLoading.value = false
  }
}
</script>

